<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>充值积分百分比列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!--添加 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="OpenBianji()">添加</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table size="small" :data="DataList" highlight-current-row v-loading="loading" element-loading-text="拼命加载中"
            style="width: 100%;" v-horizontal-scroll>
            <el-table-column align="center" sortable type="index" label="序号"></el-table-column>
            <el-table-column align="center" sortable prop="value" label="充值积分百分比" width="160">
                <template slot-scope="scope">
                    <div>{{ scope.row.value }}%</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable label="创建时间" width="150">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="OpenBianji(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="deleData(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 编辑界面 -->
        <el-dialog :title="tit" :visible.sync="editFormVisiible" width="20%">
            <el-form label-width="140px">
                <el-form-item label="充值积分百分比">
                    <div style="display: flex;">
                        <el-input size="small" v-model="xiugai.value" auto-complete="off"
                            placeholder="请输入充值积分百分比"></el-input>%
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="addData()"
                    v-if="tit == '添加'">添加</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="upData()"
                    v-if="tit == '修改'">修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getPercent,
    addPercent,
    deletePercent,
    upPercent
} from "../../api/userMG";
export default {
    data() {
        return {
            DataList: [],
            loading: false,
            tit: '添加',
            editFormVisiible: false,
            xiugai: {
                id: '',
                value: '',
                createTime: '',
            }
        }
    },
    created() {
        this.getdata()
    },
    methods: {
        // 修改
        upData() {
            this.loading = true
            upPercent(this.xiugai).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiible = false
                    this.getdata(1)
                    this.$message.success(res.msg)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 添加
        addData() {
            this.loading = true
            addPercent(this.xiugai).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiible = false
                    this.getdata(1)
                    this.$message.success(res.msg)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 打开编辑器
        OpenBianji(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.editFormVisiible = true;
                    if (row != undefined && row != "undefined") {
                        this.tit = "修改";
                        this.xiugai.id = row.id;
                        this.xiugai.value = row.value;
                        this.xiugai.createTime = row.createTime;
                    } else {
                        this.tit = "添加";
                        this.xiugai.id = '';
                        this.xiugai.value = '';
                        this.xiugai.createTime = '';
                    }
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 关闭编辑对话框
        closeDialog() {
            this.editFormVisiible = false
            this.$message({
                type: 'info',
                message: '已取消编辑'
            })
        },
        // 删除
        deleData(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.$confirm('确定删除吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error'
                    }).then(() => {
                        let data = {
                            id: row.id
                        }
                        deletePercent(data).then(res => {
                            if (res.code == 200) {
                                this.getdata(1)
                                this.$message.success(res.msg)
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 获取数据
        getdata() {
            this.loading = true;
            getPercent().then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.DataList = [];
                    this.DataList.push(res.data.data);
                    return;
                }
            })
        },
    }
}
</script>

<style></style>